<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
        <meta charset="utf-8"/>
        <title>#{itemBean.currentItem != null ? itemBean.currentItem.name : 'VCMS Site'}</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    </h:head>
    <h:body>
        <h:outputStylesheet library="css" name="style.css"/>
        <f:metadata>
            <f:viewParam id="itemId" name="itemId" value="#{itemBean.itemId}" />
        </f:metadata>
        <div class="header">
            <div class="logo">
                <a href="index.jsf"><h:graphicImage value="#{resource['images:logo.png']}" /></a>
            </div>
            <button id="show">Danh mục <span>+</span> <span style="display:none;">-</span></button>
            <div class="clear"></div>
        </div>
        <div class="nav">
            <ul>
                <ui:repeat value="#{itemBean.categoryList}" var="category">
                    <li><a href="index.jsf?categoryId=#{category.id}">#{category.name}</a></li>
                </ui:repeat>
            </ul>
        </div>
        <div class="content">
            <div class="blog">
                <h2>#{itemBean.currentItem.name}</h2>
                <!-- <div class="blog-img"><a href="#"><img src="http://www.lorempixum.com/180/150/sports/5" alt="demo-image"></a></div> -->
                <div class="blog-content">
                    <p><h:outputText value="#{itemBean.currentItem.introduction}"/></p>
                    <p><h:outputText value="#{itemBean.currentItem.content}" escape="false"/></p>
                </div>
            </div>
        </div>
        <div class="footer">
            <p>&copy; 2010-11 <a href="http://vfriends.vn">vfriends.vn</a></p>
        </div>
        <p class="author">Thanks to <a href="http://www.mobifreaks.com/?p=664">Mobifreaks</a></p>
        <script type="text/javascript">
            $('.nav').hide();
            $('#show').click(function (){
                $(".nav").toggle();
                $("span").toggle();
            });
        </script>
    </h:body>
</html>

